/**
 * 卡片组件导出处理
 * 用于生成卡片组件的HTML和JS代码
 */

export default {
  /**
   * 生成卡片组件的HTML代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} HTML代码
   */
  generateHTML(component, options = {}) {
    const { id, style = {}, props = {} } = component;
    
    // 获取组件数据
    const datas = props.datas || {};
    
    // 提取卡片属性
    const header = datas.showHeader ? datas.header || '卡片标题' : '';
    const content = datas.content || '';
    const shadow = datas.shadow || 'always';
    const bodyPadding = datas.bodyStyle?.padding || '20px';
    const borderRadius = datas.borderRadius || '4px';
    const backgroundColor = datas.backgroundColor || '#ffffff';
    
    // 构建样式
    const cardStyle = `
      border-radius: ${borderRadius};
      background-color: ${backgroundColor};
      width: 100%;
      height: 100%;
      box-shadow: ${shadow === 'always' ? '0 2px 12px 0 rgba(0, 0, 0, 0.1)' : 'none'};
      box-sizing: border-box;
    `;
    
    const headerHTML = header ? `<div class="el-card__header">${header}</div>` : '';
    
    // 生成卡片HTML
    return `
<div id="${id}" class="el-card" style="${this.generateStyle(style)} ${cardStyle}">
  ${headerHTML}
  <div class="el-card__body" style="padding: ${bodyPadding};">
    ${content}
  </div>
</div>`;
  },
  
  /**
   * 生成卡片组件的JS代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} JS代码
   */
  generateJS(component, options = {}) {
    const { id, props = {} } = component;
    const datas = props.datas || {};
    
    // 如果阴影效果是hover，添加鼠标悬停效果
    if (datas.shadow === 'hover') {
      return `
// 卡片鼠标悬停效果 - ${id}
document.getElementById("${id}").addEventListener("mouseenter", function() {
  this.style.boxShadow = "0 2px 12px 0 rgba(0, 0, 0, 0.1)";
});
document.getElementById("${id}").addEventListener("mouseleave", function() {
  this.style.boxShadow = "none";
});`;
    }
    
    return '';
  },
  
  /**
   * 生成样式字符串
   * @param {Object} style 样式对象
   * @returns {String} 样式字符串
   */
  generateStyle(style = {}) {
    // 基础样式
    const baseStyle = {
      position: 'relative',
      display: 'block',
      overflow: 'hidden',
      ...style
    };
    
    // 转换为样式字符串
    return Object.entries(baseStyle)
      .map(([key, value]) => `${key}: ${value};`)
      .join(' ');
  },
  
  /**
   * 导出所需的资源
   */
  resources: [
    { type: 'css', path: './element-ui.css' }, // Element UI样式
    { type: 'css', path: './custom-card.css' } // 自定义卡片样式
  ]
}; 